<template>
    <el-tabs v-model="activeName" type="card" v-loading="loading">
        <el-tab-pane label="全部文章" name="allArticle">
            <blog-table :tabIndex="0"></blog-table>
        </el-tab-pane>
        <el-tab-pane label="已发表" name="publish">
            <blog-table :tabIndex="1"></blog-table>
        </el-tab-pane>
        <el-tab-pane label="草稿箱" name="draft">
            <blog-table :tabIndex="2" :show-edit="true"></blog-table>
        </el-tab-pane>
        <el-tab-pane label="回收站" name="recycle">
            <blog-table :tabIndex="3" :show-edit="false"></blog-table>
        </el-tab-pane>
        <el-tab-pane label="博客管理" name="manager" v-if="isAdmin">
            <blog-table :tabIndex="4"></blog-table>
        </el-tab-pane>
        <el-tab-pane label="博客配置" name="config">
            <blog-config></blog-config>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import BlogTable from "../components/BlogTable";
    import BlogConfig from "../components/BlogConfig";
    import {get} from "../utils/api";

    export default {
        components: {
            'blog-table': BlogTable,
            'blog-config': BlogConfig,
        },
        data() {
            return {
                activeName: 'allArticle',
                isAdmin: false,
                loading: false,
            }
        },
        mounted() {
            this.fetchIsAdmin();
        },
        methods: {
            fetchIsAdmin() {
                this.loading = true
                get('/user/isAdmin').then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.isAdmin = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            },
        }
    }
</script>

<style scoped lang="stylus">
    .el-tabs {
        margin-top 20px
    }
</style>
